<template>
  <div class="my-products-container">
    <el-card class="products-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <h2 class="card-title">我的商品</h2>
        </div>
      </template>
      <div class="product-list">
        <el-card
          v-for="product in myProducts"
          :key="product.id"
          class="single-product-card"
          shadow="hover"
        >
          <div class="product-img-container">
            <img :src="product.coverImage" class="product-img" />
          </div>
          <div class="product-info">
            <div class="product-name">{{ product.name }}</div>
            <div class="product-price">
              <span class="current-price">¥{{ product.price }}</span>
              <span v-if="product.originalPrice" class="original-price">
                ¥{{ product.originalPrice }}
              </span>
            </div>
            <div class="product-status">
              <el-tag :type="product.status === 1? 'success' : 'danger'">
                {{ product.status === 1? '在售' : '已售出' }}
              </el-tag>
            </div>
          </div>
          <div class="action-buttons">
            <el-button
              type="primary"
              size="small"
              @click="editProduct(product.id)"
            >
              <el-icon><Edit /></el-icon>
              编辑
            </el-button>
            <el-button
              v-if="product.status === 1"
              type="danger"
              size="small"
              @click="deleteProduct(product.id)"
            >
              <el-icon><Delete /></el-icon>
              删除
            </el-button>
          </div>
        </el-card>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Edit, Delete } from '@element-plus/icons-vue';

// 模拟用户的商品数据
const myProducts = ref([
  {
    id: 1,
    name: '高等数学教材（全新）',
    price: 25,
    originalPrice: 45,
    coverImage: "/src/static/高等数学.jpeg",
    status: 1,
  },
  {
    id: 2,
    name: '二手笔记本电脑',
    price: 1200,
    originalPrice: 2500,
    coverImage: "/src/static/二手笔记本.jpeg",
    status: 1,
  },
  {
    id: 3,
    name: '自行车 9成新',
    price: 180,
    originalPrice: 300,
    coverImage: "https://img2.baidu.com/it/u=2945946510,3886698054&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667",
    status: 2,
  },
]);

// 编辑商品的函数
const editProduct = (productId) => {
  ElMessage.info(`正在编辑商品，ID: ${productId}`);
  // 这里可以添加跳转到编辑页面的逻辑
};

// 删除商品的函数
const deleteProduct = (productId) => {
  ElMessageBox.confirm('确定要删除该商品吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    // 这里可以添加删除商品的 API 调用逻辑
    myProducts.value = myProducts.value.filter(
      (product) => product.id!== productId
    );
    ElMessage.success('商品已删除');
  }).catch(() => {
    ElMessage.info('已取消删除');
  });
};
</script>

<style scoped lang="scss">
.my-products-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  padding: 40px 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
}

.products-card {
  width: 100%;
  max-width: 800px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition: all 0.3s cubic-bezier(0.25, 0, 0.25, 1);
  border: none;
}

.single-product-card {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);
  transition: all 0.3s cubic-bezier(0.25, 0, 0.25, 1);
  margin-bottom: 20px;
  padding: 20px;
  background-color: white;
}

.product-img-container {
  width: 100%;
  height: 180px;
  overflow: hidden;
  border-radius: 8px;
}

.product-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  transition: all 0.3s ease;
}

.product-info {
  margin-top: 10px;
}

.product-name {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}

.product-price {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.current-price {
  color: #42b983;
  font-size: 16px;
  font-weight: 500;
}

.original-price {
  color: #999;
  font-size: 14px;
  // text-decoration:line-height:1;
  // margin-left:8px;
}

.product-status {
  margin-bottom: 10px;
}

.action-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style>